<template>
	<!-- element Container 布局容器组件 -->
	<el-header>
		<!-- 折叠 -->
		<div class="left">
			<el-icon @click="handleCollapsed">
				<Menu />
			</el-icon>
			<span style="margin-left: 10px;">企业门户网站管理系统</span>
		</div>
		<div class="right">
			<span>欢迎 {{store.state.userInfo.username}} 回来</span>
			<el-dropdown>
				<span class="el-dropdown-link">
					<el-icon :size="30" color="#fff">
						<user />
					</el-icon>
				</span>
				<template #dropdown>
					<el-dropdown-menu>
						<el-dropdown-item @click="handleCenter">个人中心</el-dropdown-item>
						<el-dropdown-item @click="handleLogout">退出</el-dropdown-item>
					</el-dropdown-menu>
				</template>
			</el-dropdown>
		</div>
	</el-header>
</template>

<script setup lang="ts">
import { useStore } from 'vuex';
import { Menu, User } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

const store = useStore();
const router = useRouter()
//处理左侧导航折叠
const handleCollapsed = () => {
	//使用 store.commit 方法来提交 mutation
	store.commit("changeCollapsed")
}
//处理右侧顶部进入个人中心
const handleCenter = ()=>{
	router.push("/center")
}
//处理右侧顶部 退出
const handleLogout = ()=>{
	localStorage.removeItem("token")
	//清除vuex里存的用户信息
	store.commit("clearUserInfo")
	router.push("/login")
}
</script>

<style scoped lang="scss">
.el-header {
	background-color: #2d3a4b; color:#fff;
	height: 60px;
	line-height: 60px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.left,.right{
	display: flex;
}
.left{
	cursor: pointer;
	i{margin: auto;}
}
.right{
	.el-dropdown{margin: auto;}
}
</style>